<template>
  <el-dialog
    title="插入文件内容"
    :visible.sync="dialogVisible"
    :before-close="handleClose"
  >
    <div class="wrapper">
      <div class="input-row">
        <el-form :inline="true" :model="queryParams" @submit.native.prevent>
          <el-form-item label="文件编号">
            <el-input
              size="small"
              clearable
              v-model="queryParams.standardNo"
              placeholder="请输入"
              @keyup.enter.native="handleQuery"
            ></el-input>
          </el-form-item>
          <el-form-item label="文件名称">
            <el-input
              size="small"
              clearable
              v-model="queryParams.docName"
              placeholder="请输入"
              @keyup.enter.native="handleQuery"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleQuery" size="small"
              >查询</el-button
            >
            <el-button @click="resetQuery" size="small">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <el-table
        v-loading="loading"
        :data="tableData"
        class="ins-table"
        max-height="500"
      >
        <el-table-column label="文件编号" prop="standardNo" />
        <el-table-column label="文件名称" prop="docName" />
        <el-table-column width="100" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="view(scope.row)"
              >更多</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        v-if="total"
        layout="prev, pager, next"
        :page-size="10"
        :total="total"
        :current-page.sync="queryParams.pageNum"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </el-dialog>
</template>

<script>
import { getStandardContent } from "@/api";
import { getDocList } from "@/api/business";
import { Message } from "element-ui";

export default {
  name: "ReferenceDialog",
  data() {
    return {
      total: 0,
      tableData: [],
      queryParams: {
        standardNo: undefined,
        docName: undefined,
        pageNum: 1,
        pageSize: 10,
      },
      loading: false,
      dialogVisible: false,
    };
  },
  methods: {
    resetQuery() {
      this.queryParams = {
        standardNo: undefined,
        docName: undefined,
        pageNum: 1,
        pageSize: 10,
      };
      this.handleQuery();
    },
    show() {
      this.resetQuery();
      this.dialogVisible = true;
    },
    async handleQuery(e) {
      if (e) {
        this.queryParams.pageNum = 1;
      }
      const data = this.queryParams;
      this.loading = true;
      const res = await getDocList(data);
      const { count, list, pageNum } = res.data;
      this.loading = false;
      this.total = count;
      this.tableData = list;
      this.queryParams.pageNum = pageNum;
    },
    handleCurrentChange(pageNum) {
      this.queryParams.pageNum = pageNum;
      this.handleQuery();
    },
    insertDocContent() {},
    async view(row) {
      if (!row.docNo) {
        Message.warning("缺少历史结构化数据");
        return;
      }
      const res = await getStandardContent({ docNo: row.docNo });
      if (!res.content) {
        return Message.error("文件内容不存在");
      }
      const doc = JSON.parse(res.content);
      this.$store.commit("xmleditor/SET_CURRENT_STANDARD", row);
      this.$store.commit("xmleditor/SET_REF_LANGUAGE_TYPE", doc?.languageType);
      this.$emit("show-content-dialog");
    },
    handleClose() {
      this.dialogVisible = false;
    },
  },
};
</script>

<style scoped>
.ins-table {
  width: 100%;
}
::v-deep .el-dialog {
  min-width: 800px;
}
::v-deep .el-dialog__body {
  padding-top: 0;
  padding-bottom: 10px;
}
</style>
